<template>
    <div>
        <r-search :searchHandle="searchHandleAdd" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="false" :isIndex="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            istrue: true,
            searchData: {
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'goodsNo',
                    placeholder: '商品编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '商品名称',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'categoryId',
                    placeholder: '分类',
                    width: 150,
                    options: [
                    ]
                },
                {
                    type: 'select',
                    prop: 'type',
                    placeholder: '商品类型',
                    width: 150,
                    options: [
                        {
                            label: '计件',
                            value: 1
                        },
                        {
                            label: '计重',
                            value: 2
                        },
                    ]
                },
                {
                    type: 'select',
                    prop: 'status',
                    placeholder: '状态',
                    width: 150,
                    options: [
                        {
                            label: '上架',
                            value: 1
                        },
                        {
                            label: '下架',
                            value: 2
                        },
                    ]
                },
            ],
            searchHandleAdd: [
                {
                    label: "新增商品",
                    type: "success",
                    handle: e => this.elFormVisible()
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '商品编号',
                    prop: 'goodsNo',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '商品名称',
                    prop: 'name'
                },
                {
                    label: '商品图片',
                    prop: 'img',
                    type: 'image'
                },
                {
                    label: '商品分类',
                    prop: 'categoryName'
                },
                {
                    label: '商品类型',
                    prop: 'type',
                    formatter: e => e.type == 1 ? '计件' : e.type == 2 ? '计重' : ''
                },
                {
                    label: '单位',
                    prop: 'unit'
                },
                {
                    label: '成本价',
                    prop: 'costPrice'
                },
                {
                    label: '销售价',
                    prop: 'price'
                },
                {
                  label: '普通用户利润',
                  prop: 'price2'
                },
                {
                  label: '会员价',
                  prop: 'vipPrice'
                },
                {
                  label: '会员用户利润',
                  prop: 'vipPrice2'
                },
                {
                    label: '库存预警值',
                    prop: 'warnStock'
                },

                {
                    label: '状态',
                    prop: 'status',
                    formatter: e => e.status == 1 ? '上架' : e.status == 2 ? '下架' : ''
                },
                {
                    label: '操作',
                    type: "button",
                    width: 170,
                    btnList: [
                        {
                            label: '编辑',
                            type: 'primary',
                            size: 'mini',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.elFormDetail(row)
                        },
                        {
                            label: '删除',
                            type: 'primary',
                            size: 'mini',
                            handle: (row) => this.TableDel('/sys/goods/delete', { id: row.id }),
                        },
                    ]
                }

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                name: '',
                // goodsIntroduction: "",
                categoryId: "",
                type: "",
                costPrice: "",
                weight: "",
                price: "",
              vipPrice: "",
                img: "",
                // goodsDetails: "",
                status: "",
                warnStock: "",
                unit: "",
              errorWeigh:"",


            },
            formCols: [
                { type: "input", label: "商品名称", width: 450, prop: "name", },
                // { type: "input", label: "商品简介", width: 450, prop: "goodsIntroduction", },
                { type: "select", label: "商品分类", width: 450, prop: "categoryId", options: [] },
                { type: "select", label: "商品类型", width: 120, prop: "type", options: [{ label: '计件', value: 1 }, { label: '计重', value: 2 },], change: (e) => { e == 1 ? this.istrue = true : this.istrue = false } },
                { type: "input", label: "商品单位", width: 200, prop: "unit", },
                { type: "input", label: "单个商品重量（单位：g）", width: 80, prop: "weight", isShow:e => this.istrue, },
                { type: "input", label: "成本价", width: 80, prop: "costPrice", remark: '元' },
                { type: "input", label: "销售价", width: 80, prop: "price", remark: '元' },
                { type: "input", label: "会员价", width: 80, prop: "vipPrice", remark: '元' },
                { type: "input", label: "库存预警值(单位:商品单位)", width: 450, prop: "warnStock"},
                { type: "input", label: "误差值（单位：g）", width: 450, prop: "errorWeigh", },
                { type: "upload", label: "商品图片", width: 200, prop: "img", remark: '只能上传jpg/png/MP4格式文件，文件不能超过500kb', rmblock: true, success: (res, file) => { this.$refs.elForm.loading = false; this.formData.img = res.data.imgPath } },
                { type: "radio", label: "状态", width: 450, prop: "status", radios: [{ label: '上架', value: 1 }, { label: '下架', value: 2 },] },
                // { type: "tinymce", label: "商品详情", width: 450, prop: "goodsDetails", },
            ],
            formRules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],
                // goodsIntroduction: [
                //     { required: true, message: '请输入商品简介', trigger: 'blur' },
                // ],
                categoryId: [
                    { required: true, message: '请输入商品分类', trigger: 'blur' },
                ],
                weight: [
                    { required: false, message: '请输入商品类型', trigger: 'blur' },
                ],
                unit: [
                    { required: true, message: '请输入商品类型', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入商品单位', trigger: 'blur' },
                ],
                costPrice: [
                    { required: true, message: '请输入成本价', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入销售价', trigger: 'blur' },
                ],
              vipPrice: [
                { required: true, message: '请输入销售价', trigger: 'blur' },
              ],
                img: [
                    { required: true, message: '请上传商品图片', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请输入状态', trigger: 'blur' },
                ],
              warnStock:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
              errorWeigh:[
                { required: true, message: '请输入', trigger: 'blur' },
              ]
                // goodsDetails: [
                //     { required: true, message: '请输入商品详情', trigger: 'blur' },
                // ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],
        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let parm = { ...this.tablePage, ...this.searchData }
            let res = await this.api.goodslist(parm)
            if (res) {
                this.tablePage.total = res.data.total

                var list=res.data.list||[];
                list.map(res=>{
                  res.price2=res.price-res.costPrice;
                  res.vipPrice2=res.vipPrice-res.costPrice;
                })

                this.tableData = list;
            }
            let resclassfy = await this.api.goodsfylist({ page: 1, limit: 10000 })
            this.searchForm[2].options = []
            this.formCols[1].options = []
            if (resclassfy) {
                for (let i = 0; i < resclassfy.data.list.length; i++) {
                    this.searchForm[2].options.push({ label: resclassfy.data.list[i].name, value: resclassfy.data.list[i].id })
                    this.formCols[1].options.push({ label: resclassfy.data.list[i].name, value: resclassfy.data.list[i].id })
                }
            }
        },
        async elFormSubmit(row) {
            // console.log(row);
            if (row) {
                await this.api.goodsupdate(row)
            } else {
                let res = null
                if (this.formData.id) {
                    res = await this.api.goodsupdate(this.formData) //advertsave
                } else {
                    res = await this.api.goodsadd(this.formData)
                }
                if (res) {
                    this.elFormVisible()
                    this.init()
                }
            }

        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            // if (this.formCols[1].label == '登录密码') {
            //     this.formCols.splice(1, 1)
            // }

            this.elFormVisible()
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
